<template>
  <div>
    <div>
      <el-form ref="refForm" :model="fundForm" label-width="80px">
        <el-row :gutter="30">
          <el-col :span="4">
            <el-form-item label="基金代码">
              <el-input
                @keydown.enter="getFundInfo"
                v-model="fundForm.fund"
                placeholder="请输入基金代码"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="基金名称">
              <el-input v-model="fundForm.name" disabled>{{
                fundForm.name
              }}</el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="类型">
              <el-input v-model="fundForm.ttype"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="基金公司">
              <el-input v-model="fundForm.company"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="托管银行">
              <el-input v-model="fundForm.bank"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item class="pull-right">
              <el-button type="primary" @click="postBasic">添加</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <el-table :data="funds" border style="width: 100%">
      <el-table-column label="序号" align="center" width="80px">
        <template #default="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="fund" label="代码" width="100" align="center">
        <template #default="scope">
          <a
            :href="'http://fund.eastmoney.com/' + scope.row.fund + '.html'"
            target="_blank"
            >{{ scope.row.fund }}
          </a>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="基金名称"
        align="left"
        width="250"
      ></el-table-column>
      <el-table-column
        prop="ttype"
        label="类型"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="company"
        label="基金公司"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="bank"
        label="托管银行"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="worth_date"
        label="净值日期"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="unit_worth"
        label="单位净值"
        align="center"
      ></el-table-column>
      <el-table-column prop="operation" align="center" label="操作">
        <template #default="scope">
          <el-button
            icon="delete"
            @click="deleteBasic(scope.row)"
            type="danger"
            size="small"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getFundBasic, deleteFundBasic, postFundBasic } from "@/apis/fund";
import { onMounted, reactive, ref, getCurrentInstance } from "vue";

export default {
  name: "FundBasic",
  setup() {
    const { proxy } = getCurrentInstance();
    const funds = ref();
    const fundForm = reactive({
      fund: "",
      name: "",
      ttype: "",
      company: "",
      bank: ""
    });
    const reset = () => {
      fundForm.fund = "";
      fundForm.name = "";
      fundForm.ttype = "";
      fundForm.bank = "";
      fundForm.company = "";
    };
    const refForm = ref();
    const deleteBasic = row => {
      deleteFundBasic(row.fund)
        .then(response => {
          proxy.$message.success(response.message);
          getBasic();
        })
        .catch(error => {
          proxy.$message.error(error.message);
        });
    };
    const getFundInfo = () => {
      let pattern = /\d{6}/;
      if (fundForm.fund.length !== 6 || !pattern.test(fundForm.fund)) {
        proxy.$message.error("基金代码非法");
        return;
      }
      getFundBasic(fundForm.fund)
        .then(response => {
          let data = response.data;
          fundForm.name = data.name;
          fundForm.ttype = data.ttype;
          fundForm.bank = data.bank;
          fundForm.company = data.company;
        })
        .catch(error => {
          proxy.$message.error(error.message);
          reset();
        });
    };
    const getBasic = () => {
      getFundBasic().then(response => {
        funds.value = response.data;
      });
    };
    const postBasic = () => {
      postFundBasic(fundForm)
        .then(response => {
          proxy.$message.success(response.message);
          reset();
          getBasic();
        })
        .catch(error => {
          proxy.$message.error(error.message);
        });
    };
    onMounted(() => {
      getBasic();
    });
    return {
      funds,
      fundForm,
      refForm,
      postBasic,
      deleteBasic,
      getFundInfo
    };
  }
};
</script>

<style lang="scss" scoped></style>
